<template>
  <section class="page">
    <headerbar>{{title}}</headerbar>

    <section class="inner-content">
      <section >
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>姓名：</div>
          <div class="value"><input type="text" placeholder="请输入姓名" v-model="data.userName"></div>
        </div>
        <div class="text-block" @click="ischeckSex(data.xb)">
          <div class="name color-default input-name"><i class="required color-red">*</i>性别：</div>
          <div class="value"><input type="text" readonly placeholder="请选择性别" v-model="data.xb"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>身份证号码：</div>
          <div class="value"><input type="text" placeholder="请输入身份证号码" v-model="data.sbzhm"></div>
        </div>
      <div class="text-block" @click="showTimePicker(data.csny,'csny')">
          <div class="name color-default input-name"><i class="required color-red">*</i>出生年月：</div>
          <div class="value"><input type="text" readonly placeholder="请输入出生年月" v-model="data.csny"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>民族：</div>
          <div class="value"><input type="text" placeholder="请输入民族" v-model="data.mz"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>籍贯：</div>
          <div class="value"><input type="text" placeholder="请输入籍贯" v-model="data.jg"></div>
        </div>
        <div class="text-block" @click="showTimePicker(data.cjgzsj,'cjgzsj')">
          <div class="name color-default input-name"><i class="required color-red">*</i>参加工作时间：</div>
          <div class="value"><input type="text" placeholder="请选择参加工作时间" v-model="data.cjgzsj"></div>
        </div>
        <div class="text-block" @click="showTimePickerDay(data.rdsj,'rdsj')">
          <div class="name color-default input-name"><i class="required color-red">*</i>入党时间：</div>
          <div class="value"><input type="text" placeholder="请选择入党时间" v-model="data.rdsj"></div>
        </div>
        <div class="text-block" @click="ischeckXWXL(data.xlxw)">
          <div class="name color-default input-name"><i class="required color-red">*</i>学位学历：</div>
          <div class="value"><input type="text" placeholder="请选择学位学历" v-model="data.xlxw"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>所在单位及职务：</div>
          <div class="value"><input type="text" placeholder="请输入所在单位及职务" v-model="data.gzdw"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>办公电话：</div>
          <div class="value"><input type="text" placeholder="请输入办公电话" v-model="data.bgdh"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>手机号码：</div>
          <div class="value"><input type="text" placeholder="请输入手机号码" v-model="data.sjhm"></div>
        </div>
        <div class="text-block" @click="ischeckDYSZLY(data.dyszly)">
          <div class="name color-default input-name"><i class="required color-red">*</i>所在领域：</div>
          <div class="value"><input readonly type="text" placeholder="请选择所在领域" v-model="data.dyszly"></div>
        </div>
        <div class="text-block" @click="ischeckDYQT(data.dyqt)">
          <div class="name color-default input-name"><i class="required color-red">*</i>党员群体：</div>
          <div class="value"><input readonly type="text" placeholder="请选择党员群体" v-model="data.dyqt"></div>
        </div>
        <p class="pdv-10"></p>
        <div @click="checkParam($event)" v-preventReClick="1000" class="default-block-btn">点击报名</div>
      </section>
    </section>
  </section>
</template>

<script>
import tools from '@/utils/tools'
import api from '@/common/config/api'
import loginService from '@/service/loginService'
import moment from 'moment'
import fileIcon from '../../../../static/images/up_document.png'

export default {
  name: 'partyEducationSignUp',
  data () {
    return {
      title: "报名",
      data:  {
        classId:'',//课程id
        userName: '',//姓名
        xb:'',//性别
        sbzhm:'',//身份证号码
        csny:'',//出生年月
        mz:'',//民族
        jg:'',//籍贯
        cjgzsj:'',//参加工作时间
        rdsj:'',//入党时间
        xlxw:'',//学位学历
        gzdw:'',//所在单位及职务 - 工作单位
        bgdh:'',//办公电话
        sjhm:'',//手机号码
        dyszly:'',//党员所在领域
        dyqt:'',//党员群体
        userId:'',//用户id
        groupId:'',//组织id
        groupName:'',//组织名称
      },
      userInfo:'',//用户信息
      partyInfo:'',//党员信息
      dyqtList:[ //党员群体
        { text: '基层党组织书记', value: '基层党组织书记' },
        { text: '脱贫攻坚一线党员', value: '脱贫攻坚一线党员' },
        { text: '新党员', value: '新党员' },
        { text: '青年党员', value: '青年党员' },
        { text: '老年党员', value: '老年党员' },
        { text: '退役军人党员', value: '退役军人党员' },
        { text: '流动党员', value: '流动党员' },
        { text: '下岗失业人员中的党员', value: '下岗失业人员中的党员' },
        { text: '其他', value: '其他' },
      ],
      szlyList:[//所在领域
        { text: '农村', value: '农村' },
        { text: '街道社区', value: '街道社区' },
        { text: '机关单位', value: '机关单位' },
        { text: '事业单位', value: '事业单位' },
        { text: '国企', value: '国企' },
        { text: '学校', value: '学校' },
        { text: '公立医院', value: '公立医院' },
        { text: '非公和神会', value: '非公和神会' },
        { text: '民族地区', value: '民族地区' },
        { text: '其他', value: '其他' },
      ],
    }
  },
  watch: {
  },
  created () {
   this.data.classId = this.$route.params.id
    this.userInfo = this.$localStorage.get('userInfo') //用户信息
    this.partyInfo = this.$localStorage.get('partyInfo') //党员信息
    console.log('this.partyInfo',this.partyInfo);
    this.data.userName = this.userInfo.nickname
    this.data.xb = this.tools.getSex(this.userInfo.sex)
    // this.data.sbzhm = this.userInfo.nickname
    this.data.csny = this.getTime(this.userInfo.birthday)
    this.data.mz = this.partyInfo.mz
    this.data.jg = this.partyInfo.csd
    this.data.cjgzsj = this.partyInfo.cjgzsj
    this.data.rdsj = this.partyInfo.rdsj
    this.data.xlxw = this.partyInfo.xw
    this.data.gzdw = this.partyInfo.gzdw +this.partyInfo.dzbzw
    this.data.bgdh = this.partyInfo.bgdh
    this.data.sjhm = this.partyInfo.mobile
    this.data.userId = this.partyInfo.userId
    this.data.groupId = this.partyInfo.dgwGroupId
    this.data.groupName = this.partyInfo.dgwGroupName
    // this.data.dyszly = this.partyInfo.dyszly
    // this.data.dyqt = this.partyInfo.partyType
    console.log('this.data.classId.id this.data.classId.id ',this.data.classId);
    console.log('userInfo', this.userInfo);
    this.getDictValue()
    this.getDictSZLY()
  },
  beforeDestroy() {
  },
  methods: {
    // 初始化数据
    init(formState){
      if (formState=="edit") {
        this.distanceFun1(); //距离会议时间
        this.title = "修改会议";
        this.orgLifeId = this.$route.query.orgLifeId; //ID
        if (this.$store.state.organizationalLifeAddData || this.$store.state.scheduleTypeSelected) {
          this.resumeData()
        }else{
          this.loadData();
        }
      } else if (formState=="overEdit") { //会议结束后修改
        this.title = "修改会议";
        this.orgLifeId = this.$route.query.orgLifeId; //ID
        this.loadData();
      }else {
        this.title = "添加会议";
      }
    },
    getTime (createTime) {
      if (!createTime) {
        return ''
      }
      return moment(createTime).format('YYYY-MM-DD')
    },
    isImage (fileName) {
      let arrExt = fileName.split('.')
      return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
    },
    imgView (data) {
      let imgs = [this.showImg(data.fileId)]
      this.$createImagePreview({
        initialIndex: 0,
        imgs: imgs
      }, (h) => {
        return h('div', {
          class: {
            'image-preview-custom-header': false
          },
          slot: 'header'
        }, '')
      }).show()
    },
    showImg (fileId) {
      let fileUrl = this.tools.getImgUrl(fileId)
      return fileUrl
    },
    download (item) {
      console.log('item={}', item)
      let url = this.tools.getImgUrl(item.fileId)
      let fileName = item.fileName
      if (window.android && window.android.downloadFile) {
        window.android.downloadFile(url, fileName)
      }
    },
    ischeckSex(val){
      this.$createPicker({
        title:"选择性别",
        data: [[{ text: '男', value: '男'}, { text: '女', value: '女' },]],
        value: [[val]],
        onSelect: (selected) => {
          console.log(selected)
          this.data.xb = selected
        },
      }).show()
    },
    ischeckXWXL(val){
      let list=[
        { text: '博士后', value: '博士后' },
        { text: '博士', value: '博士' },
        { text: '硕士', value: '硕士' },
        { text: '本科', value: '本科' },
        { text: '大专', value: '大专' },
        { text: '中专', value: '中专' },
        { text: '高中', value: '高中' },
        { text: '初中', value: '初中' },
        { text: '小学', value: '小学' },
      ]
      this.$createPicker({
        title:"选择学历学位",
        data: [list],
        value: val,
        onSelect: (selected) => {
          console.log(selected[0])
          this.data.xlxw = selected[0]
        },
      }).show()
    },
    // 党员群体
    ischeckDYQT(val){
      let list=this.dyqtList
      this.$createPicker({
        title:"选择党员群体",
        data: [list],
        value: val,
        onSelect: (selected) => {
          this.data.dyqt = selected[0]
        },
      }).show()
    },
    ischeckDYSZLY(val){
      let list= this.szlyList
      this.$createPicker({
        title:"选择所在领域",
        data: [list],
        value: val,
        onSelect: (selected) => {
          this.data.dyszly = selected[0]
        },
      }).show()
    },
    resetData () {
      this.data = {
        type: '',
        subType: '',
        theme: '',
        typeLabel: '',
        attendUserId: '',
        attendUserName: '',
        compereUserId: '',
        compereUserName: '',
        recordEUserId: '',
        recordEUserName: '',
        address: '',
        meetStartTime: '',
        meetEndTime: '',
        subTypeLabel: '',
        tabIndex: 0,
        concentrated: '-1',
        concentratedLabel: '',
        duration: '',
        durationLabel: '',
        agenda: '',
        contents: '',
        flagType: true
      }
    },
    checkParam (e) {
      if (e.target.disabled) {
        return false
      }
      if (this.data.userName === '') {
        return tools.tip('请输入姓名！')
      }
      if (this.data.xb === '') {
        return tools.tip('请选择性别！')
      }
      if (this.data.sbzhm === '') {
        return tools.tip('请输入身份证号码！')
      }
      if (this.data.csny === '') {
        return tools.tip('请输入出生年月！')
      }
      if (this.data.mz === '') {
        return tools.tip('请输入民族！')
      }
      if (this.data.jg === '') {
        return tools.tip('请输入籍贯！')
      }
      if (this.data.cjgzsj === '') {
        return tools.tip('请选择参加工作时间！')
      }
      if (this.data.rdsj === '') {
        return tools.tip('请选择入党时间！')
      }
      if (this.data.xlxw === '') {
        return tools.tip('请选择学位学历！')
      }
      if (this.data.gzdw === '') {
        return tools.tip('请输入所在单位及职务！')
      }
      if (this.data.bgdh === '') {
        return tools.tip('请输入办公电话！')
      }
      if (this.data.sjhm === '') {
        return tools.tip('请输入手机号码！')
      }
      if (this.data.dyszly === '') {
        return tools.tip('请选择所在领域！')
      }
      if (this.data.dyqt === '') {
        return tools.tip('请选择党员群体！')
      }

      let _this = this
      this.$createDialog({
        type: 'confirm',
        // icon: 'cubeic-alert',
        title: '温馨提示',
        content: '确认信息，是否进行提交？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          _this.submit()
        },
        onCancel: () => {
        }
      }).show()
    },
    submit () {
        loginService.appBm(this.data).then(res=>{
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          if (res.code === 0) {
            this.$router.replace({ name: '/partyEducation' ,params:{index:1}})
            return tools.tip(res.message)
          }
        })

    },
    // 选择会议类型
    showType () {
      this.$createActionSheet({
        title: '会议类型',
        active: 10,
        data: [
          {
            scope: 'shyk',
            content: '三会一课'
          },
          {
            scope: 'ztdr',
            content: '主题党日'
          },
          {
            scope: 'mzpy',
            content: '民主评议'
          }
        ],
        onSelect: (item, index) => {
          this.data.typeLabel = item.content
          this.data.type = item.scope
          this.$forceUpdate()
        },
        onCancel: () => {
        }
      }).show()
    },
    // 选择会议子类型
    showSubType () {
      let subTypes
      if (this.data.type.includes('mzpy') || this.data.type.includes('ztdr')) {
        subTypes = [
          {
            scope: '1',
            content: '支部党员大会'
          },
          {
            scope: '4',
            content: '党课'
          }
        ]
      } else {
        subTypes = [
          {
            scope: '1',
            content: '支部党员大会'
          },
          {
            scope: '2',
            content: '支部委员会'
          },
          {
            scope: '3',
            content: '党小组会'
          },
          {
            scope: '4',
            content: '党课'
          }
        ]
      }
      this.$createActionSheet({
        title: '会议子类型',
        active: 10,
        data: subTypes,
        onSelect: (item, index) => {
          this.data.subTypeLabel = item.content
          this.data.subType = item.scope
          this.$forceUpdate()
        },
        onCancel: () => {
        }
      }).show()
    },
    // 选择人员
    selectPerson (modelName) {
      this.storeData()
      // fromOrg表示从组织生活进入
      if (modelName === 'compereUserName' || modelName === 'recordEUserName') {
        if(this.data.attendUserName && this.data.attendUserName !='' || this.formState === 'edit'){
          return this.$router.push({path: `/personnelSelection/${modelName}`, query: {isRadio: 1, fromOrg: 1,formState:this.formState}})
        }else{
          return this.tools.tip("请先选择参与人员")
        }

      }
      this.$router.push({path: `/personnelSelection/${modelName}`, query: {fromOrg: 1}})
    },
    storeData () {
      this.$store.state.organizationalLifeAddData = this.data
    },
    clearStore () {
      delete this.$store.state.organizationalLifeAddData
    },
    resumeData () {
      if (this.$store.state.organizationalLifeAddData) {
        this.data = this.$store.state.organizationalLifeAddData
      }
      if (this.$store.state.scheduleTypeSelected) {
        let arrNames = []
        let arrKeys = []
        this.$store.state.scheduleTypeSelected.forEach((v) => {
          arrKeys.push(v.value)
          arrNames.push(v.name)
        })
        this.data.typeLabel = arrNames.join(',')
        this.data.type = arrKeys.join(',')
        console.log('------------type=', this.data.type)
      }
    },
    showTimePicker (time,type) {
      this.$createDatePicker({
        // columnCount: 2,
        min: new Date(1921, 1,1),
        max: new Date(),
        value: new Date(),
        onSelect: (selectedTime, selectedText, formatedTime) => {
          if(type=== 'csny'){
            this.data.csny = moment(selectedTime).format('YYYY-MM-DD')
          }
          if(type=== 'cjgzsj'){
            this.data.cjgzsj = moment(selectedTime).format('YYYY-MM-DD')
          }

        },
      }).show();
    },
    showTimePickerDay (time,type) {
      this.$createDatePicker({
        columnCount: 3,
        min: new Date(1921, 1,1),
        max: new Date(),
        value: new Date(moment(time).format('YYYY'),moment(time).format('MM'),moment(time).format('DD')),
        onSelect: (selectedTime, selectedText, formatedTime) => {
          if(type=== 'rdsj'){
            this.data.rdsj = moment(selectedTime).format('YYYY-MM-DD')
          }
        },
      }).show();
    },
    //党建教育党员群体
    getDictValue() {
      let data = {
        catKey: "DANG_WU_",
        treeKey: "DJJY",
      };
      this.fetchService.dictValue(data).then((res) => {
        console.log("this.fetchService.dictValue", res.data);
        if(res.code !== 0){
          return
        }
        if (res.code === 0 && res.data.length>0) {
          this.dyqtList = res.data
          this.dyqtList.forEach(item=>{
            item.text = item.name
          })
        }
      });
    },
    //党建教育党员所在领域
    getDictSZLY() {
      let data = {
        catKey: "DANG_WU_",
        treeKey: "DJJYSZLY",
      };
      this.fetchService.dictValue(data).then((res) => {
        console.log("this.fetchService.dictValue", res.data);
        if(res.code !== 0){
          return
        }
        if (res.code === 0 && res.data.length>0) {
          this.szlyList = res.data
          this.szlyList.forEach(item=>{
            item.text = item.name
          })
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

/*文档下载*/
.list-download {
  .item {
    border-bottom: 1px solid rgba(212, 212, 212, 1);
    padding: pxToRem(30px);
    .inner {
      display: flex;
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
      .bd {
        flex: 1;
        .title {
          height: auto;
          line-height: 1.2em;
          font-size: pxToRem(30px);
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          word-break: break-all;
        }
        .tip {
          color: $tip-color;
          padding-top: pxToRem(22px);
        }
      }
      .ft {
        width: pxToRem(300px);
        text-align: right;
        flex-shrink:0;
        margin-left:20px;
      }
      .btn-line {
        text-align: center;
        width: pxToRem(130px);
        margin-left: pxToRem(10px);
        height: pxToRem(60px);
        background: rgba(255, 255, 255, 1);
        border: 1px solid $theme-color;
        border-radius: pxToRem(10px);
        font-size: pxToRem(28px);
        font-weight: 400;
        color: rgba(226, 0, 1, 1);
        line-height: pxToRem(60px);
      }
    }

  }
}
</style>
